<template>
	<view class="popup popup--fixed popup-route-list" :class="{'active':visible}" @click.stop = "visible=false">
		<PopupClose :top="90" :right="10" @close="visible=false"></PopupClose>
		<view class="route-list flex--col">
			<RouteItem v-for="route in routeList" :key="route.travelId" :showDetail="curRouteId === route.travelId" :route="route" 
			 @clickroute="handleClickRoute"></RouteItem>
		</view>
	</view>
</template>

<script>
	import RouteItem from "./RouteItem.vue"
	import PopupClose from "@/components/PopupClose/PopupClose.vue"
	export default{
		data(){
			return {
				visible:false
			}
		},
		components:{
			RouteItem,
			PopupClose
		},
		emits:['changeRoute'],
		props:{
			routeList:{
				required:true,
				type:Array,
			}
			,
			curRouteId:{
				required:true,
			}
		}
		,
		methods:{
			handleClickRoute(travelId){
				this.$emit('changeRoute',travelId)
				
			},
			open(){
				this.visible = true
			}
		},
	
	
	}
</script>

<style lang="scss">
	.popup-route-list{
		transform: translate(-50%,-50%);
		top:50%;
		left:50%;
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,0.3);
		overflow-y: scroll;
		
		display:none;
		&.active{
			display:block
		}
	}
	
	.route-list{
		width: 80%;
		padding:20px 0px;
		margin:auto;
		
		gap:24px;
	}
	
</style>